<template>
  <div class="div">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col :span="24" class="search-form">
        <el-form :inline="true" :model="formInline" size="mini">
          <el-form-item label="ID搜索:">
            <el-input class="ipt-width-150" v-model="formInline.account" placeholder="输入账号"></el-input>
          </el-form-item>
          <el-form-item label="角色搜索:">
            <el-select class="ipt-width-150" v-model="formInline.name" placeholder="选择角色">
              <el-option label="--请选择--" value="0"></el-option>
              <el-option
                v-for="(item,index) in role"
                :key="index"
                :label="item.rolename"
                :value="item.rolename"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账号状态:">
            <el-select class="ipt-width-150" v-model="formInline.state" placeholder="选择状态">
              <el-option label="--请选择--" value="0"></el-option>
              <el-option
                v-for="(item,index) in sector"
                :key="index"
                :label="item.sys"
                :value="item.sys"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchAccount">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clearall">清空</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="user-list">
      <el-button class="btn" type="primary" @click="addAccount">添加</el-button>
      <el-col :span="15">
        <el-table
          :header-cell-style="{'text-align':'center'}"
          :body-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          ref="multipleTable"
          border
          style="width: 100%"
        >
          <el-table-column prop="roleid" label="编号" width="140"></el-table-column>
          <el-table-column prop="rolename" label="角色" width="200"></el-table-column>
          <el-table-column prop="roledescription" label="角色说明" width="251"></el-table-column>
          <el-table-column prop="rolestate" label="账号状态" width="130"></el-table-column>
          <el-table-column fixed="right" label="操作" width="270">
            <template slot-scope="scope">
              <el-button @click="lookup(scope.row)" type="text" size="small">角色查看</el-button>
              <el-button @click="look(scope.row)" type="text" size="small">角色授权</el-button>
              <el-button @click="write(scope.row)" type="text" size="small">角色修改</el-button>
              <el-button @click="deleteitem(scope.row)" type="text" size="small">角色删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row class="user-list" type="flex" justify="center" style="text-align: center">
      <el-col :span="24">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-sizes="[5,10,15,20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <el-dialog title :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div class="div1">权限管理</div>
      <div class="divdiv">
        <span class="divdiv1">编号：{{rule.roleid}}</span>
        <span>角色：{{rule.rolename}}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-form :model="form">
          <div class="div2">权限</div>
          <div class="div7">系统设置：</div>
          <el-form-item label>
            <el-checkbox-group @change="permition" class="div5" v-model="form.type">
              <el-checkbox
                v-for="(item,index) in permission"
                :key="index"
                :label="item.permission.permissiontitle"
                :name="item.permission.permissiontitle"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div class="div6">我的桌面</div>
          <el-form-item label>
            <el-checkbox-group class="div5" v-model="form.type">
              <el-checkbox label="待处理" name="type1"></el-checkbox>
              <el-checkbox label="请假人数" name="type2"></el-checkbox>
              <el-checkbox label="相关事宜" name="type3"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!-- <el-button type="primary" round>保存</el-button> -->
        </el-form>
        <div class="divd">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="permissionconfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>

    <el-dialog title :visible.sync="dialogFormVisible" width="40%">
      <!-- <span class="modify1">机构：{{addform.city}}</span> -->
      <div v-show="rolestate">
        <span class="modify">角色: {{addform.rolename}}</span>
        <span>I编号D:{{addform.roleid}}</span>
        <el-form :model="form">
          <el-form-item label="角色:" class="width" :label-width="formLabelWidth">
            <el-input
              v-model="addform.rolename"
              ref="rolename"
              placeholder="请输入角色"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="说明:" class="width" :label-width="formLabelWidth">
            <el-input
              v-model="addform.roledescription"
              placeholder="请输入角色说明"
              ref="roledescription"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item v-show="itemstate" label="状态:" class="width" :label-width="formLabelWidth">
            <el-input
              v-model="addform.rolestate"
              ref="rolestate"
              placeholder="请输入角色状态"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="lookstate" class="lookstate">
        <p>编号:{{lookdata.roleid}}</p>
        <p>角色:{{lookdata.rolename}}</p>
        <p>描述:{{lookdata.roledescription}}</p>
        <p>状态:{{lookdata.rolestate}}</p>
      </div>
      <div slot="footer" class="dialog-footer footer1">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmed()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- <button @click="permition">查看权限</button> -->
  </div>
</template>

<script>
let that = this;
import qs from "qs";
export default {
  name: "accountManagement",
  data() {
    return {
      formInline: { account: "", name: "不限", state: "不限" },
      role: [],
      sector: [
        {
          account: "",
          sys: "正常",
        },
        {
          account: "",
          sys: "冻结",
        },
      ],
      tableData: [
        {
          id: 1,
          account: "17786479680",
          sf: "雇主",
          city: "深圳",
          endDate: "教务处",
          accState: "正常",
        },
      ],
      currentPage: 1,
      pageSize: 5,
      dialogVisible: false,
      index: 0,
      data: [{ endDate: "2017-11-16" }],
      dialogFormVisible: false,
      form: {
        name: "",
        sex: "",
        city: "",
        region: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        endDate: "",
        regDate: "",
        sf: "",
        account: "",
      },
      formLabelWidth: "60px",
      addform: {
        roledescription: "",
        roleid: "",
        rolename: "",
        rolestate: "",
      },
      state: false,
      value: "",
      n: 0,
      total: 0,
      testdata: "",
      rolestate: false,
      lookstate: false,
      lookdata: {},
      rule: {
        roleid: 0,
        rolename: "",
      },
      dialogVisible: false,
      rulerolename: "",
      itemstate: false,
      roleidmodify: 0,
      permission: [],
      permissiondata: [],
      permissionid: 0,
      permiss: [],
    };
  },
  methods: {
    permissionconfirm() {
      this.dialogVisible = false;
      let that = this;
      let arr = [];
      let i = 0;
      // let i = 0
      this.permissiondata.filter(function (val, index) {
        let obj = {
          roleid: that.permissionid,
          permissionid: that.permissiondata[index],
        };
        arr.push(obj);
        i++;
      });
      let url = "/api/insertRolePermission";
      this.$axios({
        method: "post",
        url: url,
        data: JSON.stringify(arr),
      }).then((res) => {
        console.log(res);
      });
      console.log(arr);
    },
    permition(e) {
      // this.permissiondata = e
      let that = this;
      let n = 0;
      // console.log(e)
      // console.log(this.permission)
      e.filter(function (val, index) {
        for (let i = 0; i < that.permission.length; i++) {
          if (val == that.permission[i].permission.permissiontitle) {
            that.permissiondata[n] = that.permission[i].permissionid;
            n++;
          }
        }
      });
      console.log(this.permissiondata);
      // let n = 0
      // this.permiss = this.permissiondata.filter(function(val,index){
      //   for(let i = 0;i<that.permission.length;i++){
      //       if(that.permission[i].permission.permissiontitle == val){
      //         that.permiss[n] = that.permission[i].permissionid
      //         n++
      //       }
      //   }
      //   return true
      // })
      console.log(this.permiss);
    },
    ruleconfirm(e) {
      console.log(e);
      this.rulerolename = e;
    },
    ruleset() {
      this.dialogVisible = false;
      let that = this;
      let data = {
        roleid: this.rule.roleid,
        rolename: this.rulerolename,
      };
      console.log(data);
      let urla = "/api/updateRole";
      that
        .$axios({
          method: "post",
          url: urla,
          data: JSON.stringify(data),
        })
        .then((res) => {
          let url = "/api/selectAllRole";
          let data = {};
          that
            .$axios({
              method: "post",
              url: url,
              data: JSON.stringify(data),
            })
            .then((res) => {
              // console.log(res.data.data);
              that.tableData = res.data.data;
              that.tableData = that.tableData.filter(function (val, index) {
                if (val.rolestate == 0) {
                  val.rolestate = "正常";
                } else {
                  val.rolestate = "冻结";
                }
                return true;
              });
              console.log(that.tableData);
              that.total = this.tableData.length;
            });
        });
    },
    lookup(row) {
      this.rolestate = false;
      this.dialogFormVisible = true;
      this.lookstate = true;
      this.n = 3;
      this.lookdata = row;
      console.log(this.lookdata);
    },
    clearall() {
      this.formInline.account = "";
      this.formInline.name = "不限";
      this.formInline.state = "不限";
      // this.sector.sys = ""
    },
    deleteitem(e) {
      let that = this;
      let url = "/api/delRole";
      let data = {
        roleid: e.roleid,
      };
      that
        .$axios({
          method: "post",
          url: url,
          data: JSON.stringify(data),
          // headers: {
          //   "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          // },
        })
        .then((res) => {
          let url = "/api/selectAllRole";
          let data = {};
          that
            .$axios({
              method: "post",
              url: url,
              data: JSON.stringify(data),
            })
            .then((res) => {
              // console.log(res.data.data);
              that.tableData = res.data.data;
              that.tableData = that.tableData.filter(function (val, index) {
                if (val.rolestate == 0) {
                  val.rolestate = "正常";
                } else {
                  val.rolestate = "冻结";
                }
                return true;
              });
              that.total = that.tableData.length;
            });
        });
      // console.log(e);
      // console.log(that.splice(e.id-1,1))
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    look(row) {
      this.permissionid = row.roleid;
      this.rule.roleid = row.roleid;
      this.rule.rolename = row.rolename;
      let that = this;
      this.dialogVisible = true;
      this.index = row;
      this.permission =[]
      // console.log(this);
      // let that = this
      let url = "/api/selectRolePermission";
      let data = {};
      this.$axios({
        method: "post",
        url: url,
      }).then((res) => {
        // console.log(res.data.data);
        console.log(res.data.data);
        let arr = [];
        // that.permission;
        let count = 0;
        arr = res.data.data.filter(function (val, index) {
          return val.role.rolename == row.rolename;
        });
        console.log(arr);
        for (let i = 0; i < arr.length; i++) {
          for (let n = 0; n < that.permission.length; n++) {
            if (that.permission[n].permission.permissiontitle == arr[i].permission.permissiontitle ) {
              count = 1;
            }
          }
          if (count == 0) {
            that.permission.push(arr[i]);
 
          }

        }
           console.log(that.permission);        
        // console.log()
      });
    },
    write(row) {
      this.lookstate = false;
      this.itemstate = true;
      this.n = 1;
      this.rolestate = true;
      this.dialogFormVisible = true;
      this.roleidmodify = row.roleid;
      // console.log(this.value);
    },
    confirmed() {
      // console.log(this.value
      let flag = true;
      let that = this;
      if (this.n == 1) {
        that.itemstate = false;
        let data = {
          // roledescription: "",
          // roleid: "",
          // rolename: "",
          // rolestate: "",
        };
        if (this.$refs.roledescription.value) {
          data.roledescription = this.$refs.roledescription.value;
        }
        data.roleid = this.roleidmodify;
        if (this.$refs.rolename.value) {
          data.rolename = this.$refs.rolename.value;
        }
        if (this.$refs.rolestate.value) {
          data.rolestate = this.$refs.rolestate.value;
        }
        console.log(data);
        let urla = "/api/updateRole";
        that
          .$axios({
            method: "post",
            url: urla,
            data: JSON.stringify(data),
          })
          .then((res) => {
            let url = "/api/selectAllRole";
            let data = {};
            that
              .$axios({
                method: "post",
                url: url,
                data: JSON.stringify(data),
              })
              .then((res) => {
                // console.log(res.data.data);
                that.tableData = res.data.data;
                console.log(that.tableData);
                that.tableData = that.tableData.filter(function (val, index) {
                  if (val.rolestate == 0) {
                    val.rolestate = "正常";
                  } else {
                    val.rolestate = "冻结";
                  }
                  return true;
                });
                that.total = this.tableData.length;
              });
          });
      } else if (this.n == 2) {
        let url = "/api/insertRole";
        let that = this;
        that
          .$axios({
            method: "post",
            url: url,
            data: JSON.stringify(that.addform),
          })
          .then((res) => {
            let url = "/api/selectAllRole";
            let data = {};
            that
              .$axios({
                method: "post",
                url: url,
                data: JSON.stringify(data),
              })
              .then((res) => {
                // console.log(res.data.data);
                that.tableData = res.data.data;
                that.tableData = that.tableData.filter(function (val, index) {
                  if (val.rolestate == 0) {
                    val.rolestate = "正常";
                  } else {
                    val.rolestate = "冻结";
                  }
                  return true;
                });
                that.total = this.tableData.length;
              });
          });
      } else if (this.n == 3) {
        this.lookstate = false;
      }

      // this.state = false;
      this.dialogFormVisible = false;
      this.addform.roledescription = "";
      this.addform.roleid = "";
      this.addform.rolename = "";
      this.addform.rolestate = "";
      this.rolestate = false;
      // this.state = true;
    },
    //搜索帐号
    searchAccount() {
      let that = this;
      console.log(this.formInline);
      // let that = this
      let data = {};
      let url = "/api/selectAllRole";
      that
        .$axios({
          method: "post",
          url: url,
          data: JSON.stringify(data),
        })
        .then((res) => {
          let arr = res.data.data;
          if (that.formInline.account) {
            arr = arr.filter(function (val, index) {
              return val.roleid == that.formInline.account;
            });
          }
          // console.log(arr);
          console.log(that.formInline.name);
          if (
            that.formInline.name != "不限" &&
            that.formInline.name != "请选择" &&
            that.formInline.name != ""
          ) {
            console.log(121);
            arr = arr.filter(function (val, index) {
              return val.rolename == that.formInline.name;
            });
          }
          console.log(arr);
          if (
            that.formInline.state != "不限" &&
            that.formInline.state != "请选择"
          ) {
            let state = {
              state: 0,
            };
            arr = arr.filter(function (val, index) {
              if (that.formInline.state == "正常") {
                state.state = 0;
              }
              if (that.formInline.state == "冻结") {
                state.state = 1;
              }
              return val.rolestate == state.state;
            });
          }
          console.log(that.formInline.state);
          that.tableData = arr;
          that.tableData = that.tableData.filter(function (val, index) {
            if (val.rolestate == 0) {
              val.rolestate = "正常";
            } else if (val.rolestate == 1) {
              val.rolestate = "冻结";
            }
            return true;
          });
          that.total = that.tableData.length;
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 添加账号
    addAccount() {
      this.itemstate = false;
      this.rolestate = true;
      this.dialogFormVisible = true;
      this.n = 2;
      // this.$router.push({ path: "/main/addAccount" });
    },
    handleClick(row, column, index) {
      // console.log(row);
      // console.log(column);
      // console.log(index);
    },
    show() {
      console.log(1);
    },
    table() {
      let id = 1;
      for (let i = 0; i < this.sector.length; i++) {
        for (let n = 0; n < this.sector[i].sector.length; n++) {
          let arr = {
            id: id,
            account: "2112",
            url: require("../../../public/img/logo.png"),
            city: "",
            sector: "",
            state: "正常",
          };
          arr.account = this.sector[i].sector[n].account;
          arr.city = this.sector[i].sys;
          arr.sector = this.sector[i].sector[n].sector;
          this.tableData.push(arr);
          id++;
        }
      }
    },
    lookall() {
      let that = this;
      let url = "/api/selectAllRole";
      let data = {};
      that
        .$axios({
          method: "post",
          url: url,
          data: JSON.stringify(data),
        })
        .then((res) => {
          // console.log(res.data.data);
          that.tableData = res.data.data;
          let arr = that.tableData;
          that.tableData = that.tableData.filter(function (val, index, arr) {
            if (val.rolestate == 0) {
              val.rolestate = "正常";
            } else {
              val.rolestate = "冻结";
            }
            return true;
          });
          that.total = this.tableData.length;
        });
    },
  },
  created() {
    // this.tableData = []
    // this.table();
    this.lookall();
    // console.log("git 可以正常使用了");
    // console.log(a);
    let that = this;
    // this.dialogVisible = true;
    // this.index = row;
    // console.log(this);
    let url = "/api/selectAllRole";
    let data = {};
    that
      .$axios({
        method: "post",
        url: url,
        data: JSON.stringify(data),
      })
      .then((res) => {
        // console.log(res.data.data);
        // console.log(res.data.data);
        for (let i = 0; i < res.data.data.length; i++) {
          // console.log
          let count = 0;
          for (let n = 0; n < that.role.length; n++) {
            if (that.role[n].rolename == res.data.data[i].rolename) {
              count = 1;
              // console.log(333);
              // console.log(that.role);
              break;
            }
          }
          if (count == 0) {
            that.role.push(res.data.data[i]);
          }
          // that.role.push(res.data.data[i]);
        }
        // console.log(that.role);
      });

      
  },
  computed: {},
};
</script>

<style scoped lang="less">
.lookstate {
  // border: 1px solid;
  text-align: center;
  & > p {
    width: 70%;
    margin: 0px auto;
    padding: 20px 0px 20px 0px;
    border-bottom: 1px solid;
  }
}
.btn {
  display: block;
  margin-bottom: 1%;
}
.divdiv1 {
  margin-right: 5%;
}
.divdiv {
  margin-top: 1%;
  margin-bottom: -2%;
}
.div1 {
  color: black;
  font-weight: 600;
  font-size: 20px;
  margin-top: -5%;
}
.divd {
  width: 100%;
  display: flex;
  justify-content: center;
}
.div7 {
  margin-top: 3%;
  display: flex;
  width: 30%;
  padding-bottom: 10px;
  border-bottom: 3px solid black;
}
.div6 {
  display: flex;
  width: 30%;
  padding-bottom: 10px;
  border-bottom: 3px solid black;
}
.div5 {
  display: flex;
  flex-wrap: wrap;
}
.div4 {
  display: flex;
}
.div3 {
  border-radius: 6px;
  border: 1px solid black;
  margin-left: 0px;
}
.div2 {
  text-align: left;
  border-bottom: 1px solid black;
  padding-bottom: 5px;
}
.modify1 {
  margin-left: 22.3%;
  margin-right: 3%;
}
.modify {
  margin-right: 3%;
  margin-bottom: 2%;
}
.footer1 {
  margin: 0px auto;
  // border: 1px solid red;
  width: 24%;
}
.width:nth-of-type(1) {
  margin-top: 50px;
}
.width {
  margin: 0px auto;
  margin-bottom: 3%;
  width: 60%;
}
.search-form {
  border: 1px solid #e4e4e4;
  padding: 20px 20px 0;
  box-shadow: 0 0 3px 1px #e4e4e4;
  border-radius: 3px;
}

.ipt-width-150 {
  width: 150px !important;
}

.user-list {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 0 3px 1px #e4e4e4;
  border-radius: 3px;
}

.btn-group {
  margin-top: 20px;
}
</style>